<template>
  <user-card-list :user-list="userList"/>
  <van-empty v-if="!userList || userList.length < 1" description="数据为空"/>
</template>

<script setup lang="ts">
import { useRoute } from 'vue-router';
import { onMounted, ref } from 'vue';
import myAxios from "../plugins/myAxios";
import qs from 'qs';

const route = useRoute();
const { tags } = route.query;

const userList = ref([]);

onMounted(async () => {
  myAxios.get('/user/search/tags', {
    params: {
      tagNameList: tags,
            }
  }).then(function (response) {
    const userDataList = response?.data;
    console.log("UserDataList:", userDataList);
    // 解析 tags 字段
    userDataList.forEach(user => {
      if (user.tags) {
        try {
          user.tags = JSON.parse(user.tags);
        } catch (e) {
          console.error("JSON 解析错误:", e, user.tags);
        }
      }
    });
    userList.value = userDataList;
    console.log("userList:", userList.value);


  }).catch(function (error) {
    console.log("请求失败:", error);
  });
});




// axios 请求拦截器
myAxios.interceptors.request.use(config => {
  if (config.method === 'get') {
    config.paramsSerializer = function (params) {
      return qs.stringify(params, { indices: false });
    };
  }
  return config;
}, error => {
  return Promise.reject(error);
});
</script>

<style scoped>
</style>
